<template class="orientation-${orientation.toLowerCase()} overflow-hidden"
          show.bind="panes.size"
          data-id.bind="id"
          tabindex="0">
    <div class="ribbon ${orientation === 'Right' ? 'order-1' : 'order-0'}"
         if.bind="orientation !== 'FloatingWindow'">
        <div repeat.for="pane of panes"
             class="pane-tag ${pane === active ? 'active' : ''}"
             click.trigger="toggle(pane)"
             title="${pane.name} ${pane.shortcut ? ('(' + pane.shortcut.keyCombo.asString + ')') : ''}">
            <i class="pane-icon ${pane.icon}" show.bind="pane.icon"></i>
            <span>${pane.name}</span>
        </div>
    </div>
    <div class="pane-content flex-fill d-flex flex-column" show.bind="viewMode === 'Expanded'">
        <au-compose repeat.for="pane of panes"
                    component.bind="pane"
                    show.bind="pane === active"
                    class="flex-fill overflow-x-auto d-flex flex-column"
                    containerless>
        </au-compose>
    </div>
</template>
